<template>
    <div>
        <div id="chartSix" ref="chartSix"></div>
        <el-row :gutter="20">
            <el-col :span="12">
                <div style="letter-spacing: 1px font-weight: 900">
                    鸽笼总数：<i
                        style="
                            font-size: 16px;
                            font-weight: 900;
                            color: #ff4040;
                        "
                        >12</i
                    >
                    个
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    name: "echartStorage",
    created() {
        // this.totalAbnormal = this.allData.totalAbnormal;
        // this.layEggCycle = this.allData.layEggCycle;
        // // console.log(this.allData.totalAbnormal)
        // if (this.allData.totalAbnormal === 0) {
        //     //判断是否有异常数据，有再显示
        //     this.haveData = false;
        // } else {
        //     this.haveData = true;
        // }
    },
    mounted() {
        this.initCharts();
    },
    updated() {},
    data() {
        return {
            data: [
                //饼图数据
                {
                    value: "",
                    name: "",
                },
                {
                    value: "",
                    name: "",
                },
                {
                    value: "",
                    name: "",
                },
                {
                    value: "",
                    name: "",
                },
                {
                    value: "",
                    name: "",
                },
                {
                    value: "",
                    name: "",
                },
            ],
            totalCage: 0, //总鸽笼数据
        };
    },
    // props: ["cageCountData","theNum"],
    methods: {
        //设置图表
        initCharts() {
            let that = this;
            // let willTakeEgg = that.cageCountData["将抽蛋"];
            // let willPictureEgg = that.cageCountData["将照蛋"];
            // let takeEgg = that.cageCountData["已抽蛋"];
            // let pictureEgg = that.cageCountData["已照蛋"];
            // let checkChild = that.cageCountData["已查仔"];
            // let noHaveEgg = that.cageCountData["无蛋"];

            // that.totalCage =
            //     willTakeEgg +
            //     willPictureEgg +
            //     takeEgg +
            //     pictureEgg +
            //     checkChild +
            //     noHaveEgg;
            that.data[0].name = "无蛋";
            that.data[0].value = 4;
            that.data[1].name = "将抽蛋";
            that.data[1].value = 0;
            that.data[2].name = "已抽蛋";
            that.data[2].value = 0;
            that.data[3].name = "将照蛋";
            that.data[3].value = 0;
            that.data[4].name = "照蛋";
            that.data[4].value = 0;
            that.data[5].name = "已查仔";
            that.data[5].value = 2;

            // if (that.theNum === 2) { //对数组进行截取，实现不同状态显示不同数据
            //     that.data = that.data.slice(0,1)
            // } else if (that.theNum === 3) {
            //     that.data = that.data.slice(1,4)
            // } else if (that.theNum === 4) {
            //     that.data = that.data.slice(5,6)
            // }

            let chartSix = that.$echarts.init(that.$refs.chartSix);
            //     that.$refs.chartSix.style.width = "200px";
            //    that.$refs.chartSix.height = "300px";
            // console.log(chartSix);
            let legrndData = [];
            for (let i = 0; i < this.data.length; i++) {
                legrndData.push(this.data[i].name);
            }
            // console.log("legrndData");
            // console.log(legrndData);
            let option = {
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    top: "5%",
                    left: "left",
                    orient: "vertical",
                    data: legrndData,
                },
                title: [
                    {
                        left: "center",
                        text: "鸽笼状态数量",
                    },
                ],
                series: [
                    {
                        name: "数据",
                        type: "pie",
                        radius: ["40%", "70%"],
                        avoidLabelOverlap: false,
                        left: "center",
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: "#fff",
                            borderWidth: 2,
                        },
                        label: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "40",
                                fontWeight: "bold",
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: that.data,
                    },
                ],
            };
            // console.log(option);
            chartSix.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
#chartSix {
    width: 580px;
    height: 328px;
}
</style>